<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //  輸出值是？
      for (var i = 0; i < 5; i++) {
        setTimeout(function () {
          console.log(i);
        }, 100);
      }

      // 靠立即執行函數 + 閉包 模擬塊級作用域
      for (var i = 0; i < 5; i++) {
        (function (i) {
          setTimeout(function () {
            console.log(i);
          }, 100);
        })(i);
      }

      //   要用let的話 ， 立即執行函數都可以退出江湖
      for (let i = 0; i < 5; i++) {
        setTimeout(function () {
          console.log(i);
        }, 100);
      }

       //   如果用let聲明的變量作為 循環變量
      //  1. 每一次循環 都會生成一個 變量 （JS引擎）
      //  2.  每次循環的變量， 相當於一個 外部作用域的變量  (JS引擎)
      for (let i = 0; i < 5; i++) {
        let i = "abc";
        console.log(i);
      }
        //   这个就相当于说for (let i = 0; i < 5; i++) 里面的i（这个i不是全局变量）和let i = "abc"里面的i在两个块里面;
        // 就相当于如下这种形式
        // {
        //     let i = 1;
        //     {
        //         let i = 2;
        //         console.log(i)
        //     }
        // }

        var arr = [ 1,2,3];
        console.dir(arr);
    </script>
  </body>
</html>